<template>
  <div class="directory" style="height: 100%; overflow: auto">
    <h4 class="title" v-if="firstTitle || secondTitle">
      {{ firstTitle }} {{ secondTitle ? ">" + secondTitle : "" }}
    </h4>
    <el-row>
      <el-col :span="8">
        <el-table
          :data="tableData1"
          :cell-style="getCellStyle"
          :row-style="{ height: '60px' }"
          :header-row-style="{ height: '0' }"
          style="color: #0e0e0e"
          :header-cell-style="{ color: '#0e0e0e', padding: '0' }"
          @cell-mouse-enter="handleHover"
          @cell-mouse-leave="handleLeave"
        >
          <el-table-column prop="name" align="left">
            <template slot-scope="scope">
              <el-tooltip
                :disabled="getDisabled(scope.row)"
                class="item"
                effect="dark"
                placement="top-start"
              >
                <div slot="content" v-if="scope.row">
                  权限:{{ scope.row.readLevel == 0 ? "" : scope.row.readLevel }}
                </div>
                <span
                  v-show="scope.row"
                  @click="goLinkUrl(scope.row)"
                  style="cursor: pointer"
                  target="_blank"
                >
                  {{ scope.row ? scope.row.name : "" }}
                </span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="8">
        <el-table
          :data="tableData2"
          :cell-style="getCellStyle"
          :row-style="{ height: '60px' }"
          style="color: #0e0e0e"
          :header-cell-style="{ color: '#0e0e0e' }"
          @cell-mouse-enter="handleHover"
          @cell-mouse-leave="handleLeave"
        >
          <el-table-column prop="name" align="left">
            <template slot-scope="scope">
              <el-tooltip
                :disabled="getDisabled(scope.row)"
                class="item"
                effect="dark"
                placement="top-start"
              >
                <div slot="content" v-if="scope.row">
                  权限:{{ scope.row.readLevel == 0 ? "" : scope.row.readLevel }}
                </div>
                <span
                  v-show="scope.row"
                  @click="goLinkUrl(scope.row)"
                  style="cursor: pointer"
                  target="_blank"
                >
                  {{ scope.row ? scope.row.name : "" }}
                </span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="8">
        <el-table
          :data="tableData3"
          :cell-style="getCellStyle"
          :row-style="{ height: '60px' }"
          style="color: #0e0e0e"
          :header-cell-style="{ color: '#0e0e0e' }"
          @cell-mouse-enter="handleHover"
          @cell-mouse-leave="handleLeave"
        >
          <el-table-column prop="name" align="left">
            <template slot-scope="scope">
              <el-tooltip
                :disabled="getDisabled(scope.row)"
                class="item"
                effect="dark"
                placement="top-start"
              >
                <div slot="content" v-if="scope.row">
                  权限:{{ scope.row.readLevel == 0 ? "" : scope.row.readLevel }}
                </div>
                <span
                  v-show="scope.row"
                  @click="goLinkUrl(scope.row)"
                  style="cursor: pointer"
                  target="_blank"
                >
                  {{ scope.row ? scope.row.name : "" }}
                </span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { threeQueryList } from "@/api/table.js";
export default {
  name: "dataTable",
  props: {
    title: "",
    tableChoice: "",
  },
  data() {
    return {
      typeList: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      data: [],
      params: null,
      menuList: [],
      levelShow: false,
      firstTitle: "",
      secondTitle: "",
    };
  },

  mounted() {},
  computed: {
    isFollow() {
      return this.$store.state.app.tableData;
    },
    secondTitleVal() {
      return this.$store.state.app.secondTitle;
    },
    firstTitleVal() {
      return this.$store.state.app.firstTitle;
    },
  },

  watch: {
    isFollow: {
      handler(newVal, oldVal) {
        if (newVal.menuLevel == 1) {
          console.log(111);
          let arr = newVal.theMenuList;
          var result = [];
          for (var i = 0; i < arr.length; i += 3) {
            result.push(arr.slice(i, i + 3));
          }
          console.log("result", result);
          let tableData1 = result.map((item) => {
            return item[0];
          });
          let tableData2 = result.map((item) => {
            return item[1];
          });
          let tableData3 = result.map((item) => {
            return item[2];
          });

          this.tableData1 = tableData1;
          this.tableData2 = tableData2;
          this.tableData3 = tableData3;
        } else {
          let arr = newVal;
          var result = [];
          for (var i = 0; i < arr.length; i += 3) {
            result.push(arr.slice(i, i + 3));
          }
          console.log("result", result);
          let tableData1 = result.map((item) => {
            return item[0];
          });
          let tableData2 = result.map((item) => {
            return item[1];
          });
          let tableData3 = result.map((item) => {
            return item[2];
          });

          this.tableData1 = tableData1;
          this.tableData2 = tableData2;
          this.tableData3 = tableData3;
        }
      },
      immediate: true,
      deep: true,
    },

    secondTitleVal: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.secondTitle = newVal;
        } else {
          this.secondTitle = "";
        }

        console.log("secondTitle", newVal);
      },
      immediate: true,
      deep: true,
    },
    firstTitleVal: {
      handler(newVal, oldVal) {
        console.log("firstTitle", newVal);
        if (newVal) {
          this.firstTitle = newVal;
        } else {
          this.firstTitle = localStorage.getItem("firstTitle");
        }
      },
      immediate: true,
      deep: true,
    },
  },

  created() {},
  methods: {
    async goLinkUrl(info) {
      // 三级跳转详情，二级展示三级
      console.log("secondTitle", this.secondTitle);
      if (this.secondTitle) {
        localStorage.setItem("kindName", info.name);
        localStorage.setItem("picType", info.picType);
        localStorage.setItem("tableChoice", info.tableChoice);
        localStorage.setItem("theUnit", info.theUnit);
        localStorage.setItem("parameter", info.parameter);
        localStorage.setItem("locationLat", info.locationLat);
        localStorage.setItem("locationLng", info.locationLng);
        localStorage.setItem("proportion", info.proportion);
        localStorage.setItem("remarks", info.remarks);
        localStorage.setItem("universal", info.universal);
        localStorage.setItem("programId", info.programId);
        this.$router.push({
          path: `/chart?kindId=${info.id}`,
        });
        this.$store.dispatch("app/setContentTitle", info.name);
      } else {
        let res = await threeQueryList(info.id);
        this.menuList = res.data.result;
        console.log("menu.name", info.name);
        this.$store.dispatch("app/setTableData", this.menuList);
        this.$store.dispatch("app/setSecondTitle", info.name);
      }
    },
    getDisabled(row) {
      if (row) {
        return row.readLevel == 0 ? true : false;
      } else {
        return true;
      }
    },
    getCellStyle(row) {
      if (!row.row) {
        return { border: "none" };
      }
    },
    handleHover(row, column, cell, event) {
      this.levelShow = true;
    },
    handleLeave() {
      this.levelShow = false;
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "";
      }
    },
  },
};
</script>

<style lang="scss">
.directory {
  width: 100%;

  .el-table .warning-row {
    background: #e8f4ff !important;
  }
  .el-table__header-wrapper {
    display: none !important;
  }

  .el-table .success-row {
    background: #f0f9eb !important;
  }

  /* 去掉table 最底部的线 */
  ::v-deep .el-table--border::after,
  ::v-deep .el-table--group::after,
  ::v-deep .el-table::before {
    background-color: transparent;
  }

  ::v-deep(.el-table__body) {
    tr {
      .cell {
        width: 100%;
        height: 100px !important; //设置高度 主要是这个
        line-height: 100px;
        flex-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .el-table td,
  .el-table th {
    padding: 0px;
  }

  .el-table--border::after,
  .el-table--group::after {
    width: 0;
  }
  .customer-table::before {
    width: 0;
  }
  .customer-table .el-table__fixed-right::before,
  .el-table__fixed::before {
    width: 0;
  }

  el-table__row > td {
    border: none;
  }

  .el-table::before {
    height: 0px;
  }

  .title {
    color: #343434;
    margin-top: 40px;
    margin-left: 18px;
  }
}
</style>

